<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>购物车</title>
  <link rel="stylesheet" href="css/weui.css"/>
  <link rel="stylesheet" href="css/weuix.css"/>
  <link rel="stylesheet" href="css/style.css">


  <script src="js/common/zepto.min.js"></script>
  <script src="js/common/zepto.weui.js"></script>
  <script src="js/common/common.js"></script>
</head>
<body ontouchstart>

    <div class="weui-flex head-con">
        <div class="weui-flex__item weui-flex__item_left"><div class="placeholder"><a href="index.html"><span class="icon icon-109"></span></a></div></div>
        <div class="weui-flex__item"><div class="placeholder">购物车</div></div>
        <div class="weui-flex__item weui-flex__item_right"><div class="placeholder"><a href="#">编辑</a></div></div>
    </div>

    <div style="height:48px;"></div>

    <div class="page-cart-list">
        <div class="weui-cells weui-cells_checkbox page-cart-list-title">
            <label class="weui-cell weui-check__label" for="s15">
                <div class="weui-cell__hd">
                    <input class="weui-check" name="checkbox5" id="s15" type="checkbox">
                    <i class="weui-icon-checked"></i>
                </div>
                <div class="weui-cell__bd">
                    <p>店铺名称</p>
                </div>
            </label>
        </div>
        <div class="weui-cells weui-cells_checkbox page-cart-list-content">
            <div class="weui-cell__bd">
                <div class="weui-media-box weui-media-box_appmsg">
                    <label class="weui-cell weui-check__label" for="s14">
                        <div class="weui-cell__hd">
                            <input name="checkbox4" class="weui-check" id="s14" type="checkbox">
                            <i class="weui-icon-checked"></i>
                        </div>
                    </label>
                    <div class="weui-media-box__hd">
                        <img class="weui-media-box__thumb" src="" alt="">
                    </div>
                    <div class="weui-media-box__bd">
                        <h4 class="weui-media-box__title">标题一</h4>
                        <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
                        <div class="weui-cells">
                            <div class="weui-cell">
                                <div class="weui-cell__bd">
                                    <p>￥120.00</p>
                                </div>
                                <div class="weui-cell__ft">
                                    <div class="weui-count">
                                        <a class="weui-count__btn weui-count__decrease"></a>
                                        <input class="weui-count__number" type="number" value="1" />
                                        <a class="weui-count__btn weui-count__increase"></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="weui-cell__bd">
                <div class="weui-media-box weui-media-box_appmsg">
                    <label class="weui-cell weui-check__label" for="s14">
                        <div class="weui-cell__hd">
                            <input name="checkbox4" class="weui-check" id="s14" type="checkbox">
                            <i class="weui-icon-checked"></i>
                        </div>
                    </label>
                    <div class="weui-media-box__hd">
                        <img class="weui-media-box__thumb" src="" alt="">
                    </div>
                    <div class="weui-media-box__bd">
                        <h4 class="weui-media-box__title">标题一</h4>
                        <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
                        <div class="weui-cells">
                            <div class="weui-cell">
                                <div class="weui-cell__bd">
                                    <p>￥120.00</p>
                                </div>
                                <div class="weui-cell__ft">
                                    <div class="weui-count">
                                        <a class="weui-count__btn weui-count__decrease"></a>
                                        <input class="weui-count__number" type="number" value="1" />
                                        <a class="weui-count__btn weui-count__increase"></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="divline"></div>
    <div class="page-cart-list">
        <div class="weui-cells weui-cells_checkbox page-cart-list-title">
            <label class="weui-cell weui-check__label" for="s13">
                <div class="weui-cell__hd">
                    <input class="weui-check" name="checkbox3" id="s13" type="checkbox">
                    <i class="weui-icon-checked"></i>
                </div>
                <div class="weui-cell__bd">
                    <p>店铺名称</p>
                </div>
            </label>
        </div>
        <div class="weui-cells weui-cells_checkbox page-cart-list-content">
            <div class="weui-cell__bd">
                <div class="weui-media-box weui-media-box_appmsg">
                    <label class="weui-cell weui-check__label" for="s11">
                        <div class="weui-cell__hd">
                            <input class="weui-check" name="checkbox1" id="s11" checked="checked" type="checkbox">
                            <i class="weui-icon-checked"></i>
                        </div>
                    </label>
                    <div class="weui-media-box__hd">
                        <img class="weui-media-box__thumb" src="" alt="">
                    </div>
                    <div class="weui-media-box__bd">
                        <h4 class="weui-media-box__title">标题一</h4>
                        <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
                        <div class="weui-cells">
                            <div class="weui-cell">
                                <div class="weui-cell__bd">
                                    <p>￥120.00</p>
                                </div>
                                <div class="weui-cell__ft">
                                    <div class="weui-count">
                                        <a class="weui-count__btn weui-count__decrease"></a>
                                        <input class="weui-count__number" type="number" value="1" />
                                        <a class="weui-count__btn weui-count__increase"></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="weui-cell__bd">
                <div class="weui-media-box weui-media-box_appmsg">
                    <label class="weui-cell weui-check__label" for="s12">
                        <div class="weui-cell__hd">
                            <input name="checkbox1" class="weui-check" id="s12" type="checkbox">
                            <i class="weui-icon-checked"></i>
                        </div>
                    </label>
                    <div class="weui-media-box__hd">
                        <img class="weui-media-box__thumb" src="" alt="">
                    </div>
                    <div class="weui-media-box__bd">
                        <h4 class="weui-media-box__title">标题一</h4>
                        <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
                        <div class="weui-cells">
                            <div class="weui-cell">
                                <div class="weui-cell__bd">
                                    <p>￥120.00</p>
                                </div>
                                <div class="weui-cell__ft">
                                    <div class="weui-count">
                                        <a class="weui-count__btn weui-count__decrease"></a>
                                        <input class="weui-count__number" type="number" value="1" />
                                        <a class="weui-count__btn weui-count__increase"></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="divline"></div>


    <!-- 底部版权信息 -->
    <div class="weui-footer">
        <p class="weui-footer__links">
            <a href="javascript:void(0);" class="weui-footer__link">底部链接</a>
            <a href="javascript:void(0);" class="weui-footer__link">底部链接</a>
        </p>
        <p class="weui-footer__text">Copyright © 2008-2016</p>
    </div>

    <div style="height:55px;"></div>

    <!-- 导航 -->
    <div class="cart-nav">
        <div class="weui-cells weui-cells_checkbox">
            <label class="weui-cell weui-check__label" for="s14">
                <div class="weui-cell__hd">
                    <input name="checkbox4" class="weui-check" id="s14" type="checkbox">
                    <i class="weui-icon-checked"></i>
                </div>
                全部
            </label>
        </div>
        <div class="right">
            <div class="sum">总计：￥385.00</div>
            <a href="javascript:;" class="weui-btn weui-btn_warn">去结算</a>
        </div>
    </div>

    <script>
        var MAX = 99, MIN = 1;
        $('.weui-count__decrease').click(function (e) {
            var $input = $(e.currentTarget).parent().find('.weui-count__number');
            var number = parseInt($input.val() || "0") - 1
            if (number < MIN) number = MIN;
            $input.val(number)
        })
        $('.weui-count__increase').click(function (e) {
            var $input = $(e.currentTarget).parent().find('.weui-count__number');
            var number = parseInt($input.val() || "0") + 1
            if (number > MAX) number = MAX;
            $input.val(number)
        })
    </script>
</body>
</html>